<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
	<meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">	<meta name="description" content="">
	<title>高级响应式图表2</title>
	<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by HCODE at 2017-05-05 15:38:10
    From: https://code.hcharts.cn/demos/NPVyQW
*************************************************************************
-->
<div id="container"></div>
<button id="large">放大</button>
<button id="small">缩小</button>

	<script>
	$(function () {
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: '高级响应式图表'
        },
        subtitle: {
            text: '请点击按钮查看坐标轴变化'
        },
        xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月',
                         '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
            labels: {
                x: -15
            },
            title: {
                text: '项目'
            }
        },
        series: [{
            name: '销售',
            data: [434, 523, 345, 785, 565, 843, 726, 590, 665, 434, 312, 432]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                // Make the labels less space demanding on mobile
                chartOptions: {
                    xAxis: {
                        labels: {
                            formatter: function () {
                                return this.value.replace('月', '')
                            }
                        }
                    },
                    yAxis: {
                        labels: {
                            align: 'left',
                            x: 0,
                            y: -2
                        },
                        title: {
                            text: ''
                        }
                    }
                }
            }]
        }
    });
    $('#small').click(function () {
        chart.setSize(400, 300);
    });
    $('#large').click(function () {
        chart.setSize(800, 300);
    });
});
</script>

</body></html>